<template>
  <div class="ticket-form">
    <el-form 
      ref="formRef" 
      :model="formData" 
      :rules="rules" 
      label-width="120px"
      @submit.prevent="handleSubmit"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="票务类型" prop="ticketType">
            <el-select v-model="formData.ticketType" placeholder="请选择票务类型" style="width: 100%">
              <el-option label="专业观众票" value="visitor" />
              <el-option label="VIP观众票" value="vip" />
              <el-option label="展商票" value="exhibitor" />
              <el-option label="媒体票" value="media" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预订数量" prop="quantity">
            <el-input-number 
              v-model="formData.quantity" 
              :min="1" 
              :max="10"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="fullName">
            <el-input v-model="formData.fullName" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="formData.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱地址" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="公司名称" prop="company">
            <el-input v-model="formData.company" placeholder="请输入公司名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位" prop="position">
            <el-input v-model="formData.position" placeholder="请输入职位" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="参观日期" prop="visitDate">
            <el-date-picker 
              v-model="formData.visitDate" 
              type="date" 
              placeholder="选择参观日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参观人数" prop="visitorCount">
            <el-input-number 
              v-model="formData.visitorCount" 
              :min="1" 
              :max="20"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="参观目的" prop="purpose">
        <el-input 
          v-model="formData.purpose" 
          type="textarea" 
          :rows="3"
          placeholder="请详细说明参观目的和关注领域"
        />
      </el-form-item>

      <el-form-item label="特殊需求" prop="specialRequirements">
        <el-input 
          v-model="formData.specialRequirements" 
          type="textarea" 
          :rows="3"
          placeholder="如有特殊需求请说明（如无障碍设施、翻译服务等）"
        />
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="住宿需求" prop="accommodation">
            <el-select v-model="formData.accommodation" placeholder="请选择住宿需求" style="width: 100%">
              <el-option label="不需要" value="none" />
              <el-option label="需要推荐" value="recommend" />
              <el-option label="已预订" value="booked" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交通需求" prop="transportation">
            <el-select v-model="formData.transportation" placeholder="请选择交通需求" style="width: 100%">
              <el-option label="自行安排" value="self" />
              <el-option label="需要接送" value="pickup" />
              <el-option label="需要班车" value="shuttle" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" prop="remarks">
        <el-input 
          v-model="formData.remarks" 
          type="textarea" 
          :rows="3"
          placeholder="其他需要说明的信息"
        />
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="formData.agreeTerms">
          我已阅读并同意《票务预订服务协议》
        </el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          提交预订
        </el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'TicketForm',
  emits: ['submit'],
  setup(props, { emit }) {
    const formRef = ref(null)
    const loading = ref(false)

    const formData = reactive({
      ticketType: '',
      quantity: 1,
      fullName: '',
      gender: '',
      phone: '',
      email: '',
      company: '',
      position: '',
      visitDate: '',
      visitorCount: 1,
      purpose: '',
      specialRequirements: '',
      accommodation: '',
      transportation: '',
      remarks: '',
      agreeTerms: false
    })

    const rules = {
      ticketType: [
        { required: true, message: '请选择票务类型', trigger: 'change' }
      ],
      quantity: [
        { required: true, message: '请选择预订数量', trigger: 'change' }
      ],
      fullName: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      gender: [
        { required: true, message: '请选择性别', trigger: 'change' }
      ],
      phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      company: [
        { required: true, message: '请输入公司名称', trigger: 'blur' }
      ],
      position: [
        { required: true, message: '请输入职位', trigger: 'blur' }
      ],
      visitDate: [
        { required: true, message: '请选择参观日期', trigger: 'change' }
      ],
      visitorCount: [
        { required: true, message: '请选择参观人数', trigger: 'change' }
      ],
      purpose: [
        { required: true, message: '请详细说明参观目的', trigger: 'blur' }
      ]
    }

    const handleSubmit = async () => {
      if (!formData.agreeTerms) {
        ElMessage.warning('请先同意服务协议')
        return
      }

      try {
        await formRef.value.validate()
        loading.value = true
        
        // 模拟提交
        setTimeout(() => {
          emit('submit', formData)
          loading.value = false
        }, 1000)
      } catch (error) {
        console.log('表单验证失败:', error)
      }
    }

    const handleReset = () => {
      formRef.value.resetFields()
    }

    return {
      formRef,
      formData,
      rules,
      loading,
      handleSubmit,
      handleReset
    }
  }
}
</script>

<style scoped>
.ticket-form {
  padding: 20px 0;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-checkbox {
  margin-left: 0;
}
</style> 